<template>
  <div class="shopcar-container">
    <div class="goods-list">
      <div class="mui-card">
        <div class="mui-card-content" v-for="(item, i) in goodslist" :key="item.id">
          <div class="mui-card-content-inner flex">
            <!-- 复选框 -->
            <div class="mui-input-row mui-checkbox mui-left">
              <label>&nbsp;</label>
              <input
                type="checkbox"
                v-model="getGoodsSelected[item.id]"
                @change="selectedChange(item.id, getGoodsSelected[item.id])"
                :disabled="item.num === 0"
              >
            </div>
            <!-- 中间商品图片 -->
            <img :src="item.image">
            <!-- 右侧部分 -->
            <div class="info">
              <h1>{{ item.name }}</h1>
              <p class="flex">
                <span class="price">¥{{ item.price }}</span>
                <!-- 使用 numbox 组件 -->
                <numbox
                  v-if="item.num"
                  @count="countChange"
                  :initcount="getGoodsCount[item.id]"
                  :max="item.num"
                  :goodsid="item.id"
                  size="min"
                ></numbox>
                <span v-else style="margin-right:20px;">该商品暂时无货</span>
                <a href="#" @click.prevent="remove(item.id, i)">删除</a>
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- 商品结算区域 -->
      <div class="mui-card">
        <div class="mui-card-content">
          <div class="mui-card-content-inner balance">
            <div class="left">
              <p>总计不含运费</p>
              <p>已勾选商品 <span class="red">{{ getSelectedCount }}</span> 件，总价 <span class="red">¥{{ getSelectedAmount }}</span></p>
            </div>
            <mt-button type="primary" @click="createOrder">去结算</mt-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'; // 导入 mapState 和 mapGetters
import numbox from '../components/numbox.vue'; // 导入 numbox 组件

export default {
  data() {
    return {
      goodslist: [] // 定义 goodslist 数据
    };
  },
  components: {
    numbox // 注册 numbox 组件
  },
  computed: {
    ...mapState('shopcart', ['car']), // 从 Vuex 中获取购物车数据
    ...mapGetters('shopcart', ['getGoodsCount', 'getGoodsSelected', 'getSelectedCount', 'getSelectedGoods']), // 获取商品购买数量和选中状态
    // 计算选中商品的总价格
    getSelectedAmount() {
      var goods = this.getSelectedGoods; // 获取选中的商品
      var amount = 0; // 初始化总价格为 0
      this.goodslist.forEach(item => {
        if (goods[item.id]) { // 如果商品被选中
          amount += item.price * goods[item.id].count; // 累加商品价格
        }
      });
      return amount; // 返回总价格
    }
  },
  created() {
    this.getGoodsList(); // 在组件创建时调用获取商品列表的方法
  },
  methods: {
    getGoodsList() {
      var idArr = [];
      this.car.forEach(item => idArr.push(item.id)); // 提取商品 ID

      if (idArr.length <= 0) {
        return; // 如果购物车为空，直接返回
      }

      this.$indicator.open({
        text: '加载中' // 显示加载指示器
      });

      var params = { ids: idArr }; // 构造请求参数

      // 发送请求获取商品列表
      this.$http.get('shopcart', { params: params }).then(res => {
        this.$indicator.close(); // 关闭加载指示器

        if (res.data.code === 1) {
          this.goodslist = res.data.data; // 将数据赋值给 goodslist

          // 遍历商品列表，如果商品无货，禁用复选框
          this.goodslist.forEach(item => {
            if (item.num === 0) {
              this.selectedChange(item.id, false); // 调用 selectedChange 方法，禁用复选框
            }
          });
        } else {
          window.console.error('获取商品列表失败:', res.data.message || '未知错误');
        }
      }).catch(error => {
        this.$indicator.close(); // 关闭加载指示器
        window.console.error('请求失败:', error);
      });
    },
    // 处理 numbox 组件的数量变化事件
    countChange(goodsinfo) {
      this.$store.commit('shopcart/updateGoodsInfo', goodsinfo); // 调用 updateGoodsInfo 更新商品数量
    },
    // 处理复选框状态变化事件
    selectedChange(id, val) {
      this.$store.commit('shopcart/updateGoodsSelected', { id: id, selected: val }); // 调用 updateGoodsSelected 更新商品选中状态
    },
    // 删除商品
    remove(id, index) {
      this.goodslist.splice(index, 1); // 从 goodslist 中删除商品
      this.$store.commit('shopcart/removeCar', id); // 从 Vuex 购物车中删除商品
    },
    // 创建订单
    createOrder() {
      // 如果购物车为空，提示用户
      if (this.goodslist.length === 0) {
        this.$toast('您的购物车为空');
        return;
      }

      // 将选中的商品保存到 buy 状态中
      this.$store.commit('shopcart/setBuy');

      // 跳转到创建订单的页面
      this.$router.push({ name: 'order_create' });
    }
  }
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}
.shopcar-container {
  background: #eee;
  overflow: hidden;
  .goods-list {
    .mui-card-content-inner {
      align-items: center;
      padding: 10px;
      .mui-checkbox.mui-left input[type='checkbox'] {
        left: 0px;
      }
      .mui-radio.mui-left label, .mui-checkbox.mui-left label {
        padding-left: 20px;
        padding-right: 35px;
        padding-bottom: 22px;
      }
    }
    img {
      width: 60px;
    }
    .info {
      margin-left: 10px;
      width: 100%;
      overflow: hidden;
      box-sizing: border-box;
      h1 {
        font-size: 13px;
        font-weight: bold;
        line-height: 20px;
        padding-top: 10px;
      }
      p {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        .price {
          text-align: left;
          font-size: 16px;
          font-weight: 700;
          color: red;
          flex: 1
        }
        a {
          line-height: 25px;
        }
      }
    }
    .balance {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .red {
        color: red;
        font-weight: bold;
        font-size: 16px;
      }
    }
  }
}
</style>